<template>
	<view class="privacy-page">
		<!-- 背景装饰 (雪花特效) -->
		<canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>

		<view class="header">🔒 隐私设置</view>

		<view class="setting-list">
			<view class="setting-item" v-for="(item, index) in settings" :key="index">
				<view class="item-left">
					<text class="label">{{ item.label }}</text>
					<text class="desc">{{ item.desc }}</text>
				</view>
				<switch :checked="item.value" @change="toggleSetting(index)" />
			</view>
		</view>

		<view class="save-btn" @click="saveSettings">保存设置</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settings: [
					// {
					// 	label: "匿名发布内容",
					// 	desc: "默认以匿名身份进行告白墙发布",
					// 	value: true
					// },
					{
						label: "展示昵称",
						desc: "允许其他人看到我的昵称",
						value: false
					},
					{
						label: "公开我的收藏",
						desc: "其他人可以查看你收藏的告白",
						value: false
					},
					{
						label: "允许私信",
						desc: "允许别人向你发送私信或表白",
						value: true
					},
					// {
					// 	label: "账号保护",
					// 	desc: "增强账号安全，开启后需验证身份",
					// 	value: false
					// }
				]
			};
		},
		onLoad() {
			this.getSetting()
		},
		onReady() {
			this.initCanvasBg();
		},
		methods: {
			async getSetting () {
				const res = await this.$api.get('/user/getsetting','',true)
				if(res.data.code === 200) {
					this.settings[0].value = res.data.show_nickname = 1 ?true :false
					this.settings[1].value = res.data.show_collections = 1 ?true :false
					this.settings[2].value = res.data.allow_private_message = 1 ?true :false
				}
			},
			toggleSetting(index) {
				this.settings[index].value = !this.settings[index].value;
			},
			async saveSettings() {
				
				const params = {
					show_nickname:this.settings[0].value?1:0,
					allow_private_message:this.settings[2].value?1:0,
					show_collections:this.settings[1].value?1:0
				}
				const res = await this.$api.post('/user/set',params,true)
				console.log('dadadada',res)
				if(res.data.code === 200) {
					this.getSetting()
				}
				// 模拟保存，可以扩展为调用后端接口
			},
			initCanvasBg() {
				const sys = uni.getSystemInfoSync();
				const W = sys.windowWidth;
				const H = sys.windowHeight;
				const ctx = uni.createCanvasContext('snow-canvas', this);

				// 雪花特效的模拟
				const snowflakes = Array.from({
					length: 40
				}, () => ({
					x: Math.random() * W,
					y: Math.random() * H,
					size: Math.random() * 5 + 2,
					speed: Math.random() * 1 + 1
				}));

				const draw = () => {
					ctx.clearRect(0, 0, W, H);
					ctx.setFillStyle('rgba(255, 255, 255, 0.8)');
					ctx.beginPath();

					snowflakes.forEach(snowflake => {
						ctx.moveTo(snowflake.x, snowflake.y);
						ctx.arc(snowflake.x, snowflake.y, snowflake.size, 0, 2 * Math.PI);
					});
					ctx.fill();

					snowflakes.forEach(snowflake => {
						snowflake.y += snowflake.speed;
						if (snowflake.y > H) snowflake.y = -snowflake.size;
						snowflake.x += Math.sin(snowflake.y * 0.05) * 0.5; // 让雪花漂移
					});

					ctx.draw();
					// #ifdef H5
					requestAnimationFrame(draw);
					// #endif
					// #ifdef MP-WEIXIN
					setTimeout(draw, 1000 / 60);
					// #endif
				};

				draw();
			}
		}
	};
</script>

<style scoped>
	.privacy-page {
		position: relative;
		height: 100vh;
		background: linear-gradient(to right, #d7efff, #f8e1f4);
		padding: 60rpx 30rpx 100rpx;
	}

	.snow-canvas {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100vw;
		height: 100vh;
		pointer-events: none;
	}

	.header {
		font-size: 48rpx;
		font-weight: bold;
		color: #4caf50;
		text-align: center;
		margin-bottom: 40rpx;
		z-index: 1;
		position: relative;
	}

	.setting-list {
		position: relative;
		z-index: 1;
	}

	.setting-item {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
		animation: fadeIn 0.5s ease-in-out;
	}

	.item-left {
		flex: 1;
	}

	.label {
		font-size: 35rpx;
		font-weight: 600;
		color: #333;
		margin-right: 20rpx;
	}

	.desc {
		font-size: 26rpx;
		color: #777;
	}

	.save-btn {
		right: 30rpx;
		bottom: 60rpx;
		text-align: center;
		width: 80%;
		  margin: 0 auto;
		z-index: 99;
		background: linear-gradient(to right, #ff80ab, #ff4081);
		color: white;
		padding: 40rpx 40rpx;
		border-radius: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.2);
		animation: bounceIn 0.5s ease-in-out;
	}

	/* 动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes bounceIn {
		0% {
			transform: scale(0.9);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}
</style>